<template>
	<view class="box">
		<u-empty    v-if="list.length==0&&status!='loadmore'"   text="当前无派单"    icon="https://cdn.uviewui.com/uview/empty/history.png">
		</u-empty>
		<view v-else class="content2" v-for="(item, index) in list">
			<u-row customStyle="margin-bottom: 10px">
			    <u-col span="6">
			        <view class="demo-left" >
						<!-- {{item.orderNo}} -->
			        	预:<span style="color: red;">{{item.appointmentTime}} </span><!-- <span style="margin-left: 10px;">11km </span> -->
					</view>
			    </u-col>
				<u-col span="3">
					<view >
						<view class="typeName">
							{{item.serveName}}
						</view>
					</view>
				</u-col>
			    <u-col span="3">
			        <view class="demo-right" >
			        	<!-- <span>{{(item.totalPriceFU/100*item.commissionPercentage/100).toFixed(2)}}元</span> -->
						<span>{{(item.totalPrice/100).toFixed(2)}}元</span>
			        </view>
					<uview-ui>
						<u-divider></u-divider>
						<span></span>
					</uview-ui>
			    </u-col> 
			</u-row>
			<u-steps  direction="column" dot activeColor="#ffd02b" inactiveColor="#00ac4e">
				<u-steps-item :title="'('+item.userName+')'+item.userAddress" :desc="item.address">
				</u-steps-item>
				<u-steps-item  :desc="getDistance(technicianlatitude,technicianlongitude,item.latitude,item.longitude)">
					
				</u-steps-item>
			</u-steps>  
			<view class="u-demo-block">
				备注：{{item.serviceRemark}}
				<!-- <u-read-more showHeight="40" :shadowStyle="shadowStyle" :toggle="true" fontSize="10px" closeText="展开备注">
					<rich-text :nodes="item.serviceRemark"></rich-text>
				</u-read-more> -->
			</view>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="2">
					<view class="btn2">
						<u-button icon="file-text" plain
						    type="primary" shape="circle"size="small" text="拒绝" @click="refuse('refuse',item)"
							  color="linear-gradient(to right, rgb(254, 223, 77), rgb(255, 211, 77))"
						></u-button>
					</view>
				</u-col>
				<u-col span="2">
					<view >
						<u-button icon="file-text" plain
					        type="primary" shape="circle"size="small" text="详情" @click="navigateTo(item.id)"
							  color="linear-gradient(to right, rgb(254, 223, 77), rgb(255, 211, 77))"
						></u-button>
					</view>
				</u-col>
				<u-col span="2">
					<view >
						<u-button icon="map" plain
					        type="primary" shape="circle"size="small" text="导航" @click="mapFun(item)"
							  color="linear-gradient(to right, rgb(254, 223, 77), rgb(255, 211, 77))"
						></u-button>
						
					</view>
				</u-col>
				<u-col span="6">
					<view class="btn2" style="margin-left: 10px;">
						<u-button type="primary" shape="circle"size="small" text="接单" @click="connect('received',item)"
							 color="linear-gradient(to right, rgb(254, 223, 77), rgb(255, 211, 77))"
						></u-button>
					</view>
				</u-col>
			</u-row>
			<!-- 坐标：{{item.latitude}}--{{item.longitude}}
			<u-button type="primary" shape="circle"size="small" text="导航" @click="map(item.value3,item.latitude,item.longitude)"
				 color="linear-gradient(to right, rgb(254, 223, 77), rgb(255, 211, 77))"
			></u-button> -->
			
		</view>	
		<u-loadmore :status="status" v-if="list.length!=0"/>
		<u-tabbar
		:placeholder="false"
		icon="play-right"
		@change="name => value3 = name"
		:fixed="true"
		:safeAreaInsetBottom="false"
		>
			<!-- <u-tabbar-item text=""  name="home"></u-tabbar-item>
			<u-tabbar-item text=""  name="photo" ></u-tabbar-item>
			<u-tabbar-item text="" name="play-right"></u-tabbar-item> -->
			<u-tabbar-item text="历史派单"  @click="clickTabbar()"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';  
	export default {
		data() {
			return {
				status: 'loadmore',//上滑加载函数
				technicianlatitude:"",
				technicianlongitude:"",
				pageVO:{
					pageNo: 1,
					pageSize: 4,
					technicianId:"", 
					receiveStatus:1,//技师接单状态（1未接单，2已接单，3服务中，4已完成，5拒绝接单，6取消）
					//orderStatus:1,//订单状态:1未接单 、2已接单、3服务中、4已经完成、5拒绝、6取消 
					sort:"desc",//排序
				},
				mapid:{
					latitude:"25.267435438368057",
					longitude:"110.33772976345486",
				},
				content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
								苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
								无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
				shadowStyle: {
					    backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
					    paddingTop: "30px",
					    marginTop: "-30px", 
				},				
				datas:[
					{
						value1:"2023-11-11 15:20-16:00",
						value2:"66",
						value3:"桂林高新万达广场",
						value4:"0km",
						latitude:"25.267507",
						longitude:"110.337638",
					},
					{
						value1:"2023-11-11 15:20",
						value2:"66",
						value3:"桂林市政府",
						value4:"0km",
						latitude:"25.235661",
						longitude:"110.1799459",
					}
				],
				list:[
					
				],
				
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					buttonColor: '#00ac4e',
					iconColor: '#fff'
				},
				is_color_type: false,
			}
		},
		computed:{
			//获取是否登录
			...mapState(['hasLogin','userInfo']) 
		},
		
		mounted() {
			//获取当前位置 需用户授权
			this.getCurrentLocal()
			//this.julijiusan();
			this.pageVO.technicianId=this.userInfo.id
			//this.showPage(true)
		},
		onShow() {
			//获取当前位置
			this.showPage(true)
		},
		methods: {
			//获取数据
			showPage(type){
				
				this.pageVO.technicianId=this.userInfo.id
				this.request.getRequest(this.http.httpsLian.orderDispatchRecord,this.pageVO, type)
				.then(res => { 
					//console.log("sss："+JSON.stringify(res))
					if(res.code!=0 )return 
					if(res.data.list.length==0) {
					    this.status = 'nomore';
					    return
					}
					if(res.data.list.length<this.pageVO.pageSize) {
					    this.status = 'nomore';
					}
					if (this.pageVO.pageNo!= 1) {
						this.list = this.list.concat(res.data.list)
					} else {
						this.list=res.data.list
					} 
				}).catch(res => {
					uni.$u.toast("网络异常2")
				})
			},
			//接单
			updateStatus(type,itme){
				if(itme.receiveStatus==5){
					uni.$u.toast("当前派单已拒绝无法接单！！") 
					return
				}
				let this_=this
				this_.request.postRequest(this_.http.httpsLian.orderDispatchRecordUpdateStatus+"?type="+type,{
					id:itme.id,
					technicianId:itme.technicianId,
					orderId:itme.orderId
				}, true)
				.then(res => { 
					let iconMsg;
					if(res.code==0)iconMsg=true;
					if(res.code!=0)iconMsg=false;
					if(type=="received"){
						uni.showToast({
							title:iconMsg?'接单成功':'接单失败',
							icon:iconMsg?"success":"error",
							duration: 1500
						})
					}else{
						uni.showToast({
							title:iconMsg?'拒单成功':'拒单失败',
							icon:iconMsg?"success":"error",
							duration: 1500
						})
					}
					//回复默认值
					this_.list=[]
					this_.pageVO.pageNo=1
					this_.pageVO.pageSize=4
					this_.showPage(false)
				}).catch(res => {
					uni.$u.toast("网络异常1")
				})
				/* uni.showModal({
				        title: '提示',
				        content: '确认接单【'+itme.serveName+'】服务吗？',
				        success: function(res) {
				        if (res.confirm) {
				            // 执行确认后的操作
							
				        } 
				        else {
				            // 执行取消后的操作
				        }
				    }
				}) */ 
				
			},
			//拒单
			refuse(type,itme){
				uni.showModal({
				    content: '是否确认拒绝该派单',
				    success: (e)=>{
				    	if(e.confirm){
							this.updateStatus(type,itme)
				    	}
				    }
				});
			},
			//接单
			connect(type,itme){
				uni.showModal({
				    content: '确认接单【'+itme.serveName+'】服务吗？',
				    success: (e)=>{
				    	if(e.confirm){
							this.updateStatus(type,itme)
				    	}
				    }
				});
			},
			robOrder(level){
			      if(this.userInfo.technicianLevel!=level){
					  uni.showModal({
					      content: '您未到达建议等级是否确认抢单',
					      success: (e)=>{
					      	if(e.confirm){
					      		this.logout();
					      		setTimeout(()=>{
					      			uni.navigateBack();
					      		}, 200)
					      	}
					      }
					  });
				  }
			},
			mapFun(itme){
				//console.log("latitude:"+itme.latitude)
				//console.log("longitude:"+itme.longitude)
				//打开内置地图 导航唤醒手机高德地图 腾讯地图。
				uni.openLocation(
					{
						latitude: Number(itme.latitude),//纬度
						longitude:  Number(itme.longitude),//经度
						name:itme.userAddress,address:itme.address,
					}
				);
			},
			// 获取当前地理位置 授权验证
			getCurrentLocal(){
			  let that = this;
			  wx.getSetting({
			    success(res) {
			      if (res.authSetting['scope.userLocation'] == false){// 如果已拒绝授权，则打开设置页面
			        wx.openSetting({
			          success(res) {}
			        })
			      }  else { // 第一次授权，或者已授权，直接调用相关api
			        that.getMyLocation()
					 
			      }
			    }
			  })
			},
			// 获取当前地理位置
			getMyLocation(){
			    let that = this 
			    wx.getLocation({
			      type: 'gcj02',
			      success(res) {
			        console.log(res)
					that.technicianlatitude=res.latitude
					that.technicianlongitude=res.longitude
					
			      }
			    })
			},
			julijiusan(){
				this.getDistance(25.27315,110.34435,25.27310,110.34429)
			},
			//地图导航插件
			map(name,la1, lo1){
				let plugin = requirePlugin('routePlan');
				let key = '7JXBZ-GBYRU-UMCVH-4URDA-XATOK-WEBOA';  //使用在腾讯位置服务申请的key
				let referer = 'Jiache';   //调用插件的app的名称
				let endPoint = JSON.stringify({  //终点 
					'name': name,
					'latitude': la1,
					'longitude': lo1,
				});
				uni.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&navigation=1'
				})
			},
			//上拉事件触发
			onReachBottom(){
				console.log('上拉事件触发');
				this.pageVO.pageNo+=1
				this.status = 'loading';
				this.showPage(true)
			},
			// 页面下拉时触发，与 onLoad 等生命周期函数平级
			onPullDownRefresh() {
				console.log('页面下拉时触发');
				this.status = 'loadmore';
				//回复默认值
				this.list=[]
				this.pageVO.pageNo=1
				this.pageVO.pageSize=4
				this.showPage(true)
			    setTimeout(() => {
					// 操作完成时，必须结束下拉刷新，否则一直会有 loading 标志
					uni.stopPullDownRefresh();
				}, 1000);
			},
			//历史派单
			onNavigationBarButtonTap(e) {
				const index = e.index;
				if (index === 0) {
					uni.navigateTo({
					   url: "/pagesB/index/dispatchHistory"
					});
				}
			},
			clickTabbar(){
				uni.navigateTo({
				   url: "/pagesB/index/dispatchHistory"
				});
			},
			navigateTo(ids){
				uni.navigateTo({
				   url: "/pagesB/serviceList/details?params="+encodeURIComponent(JSON.stringify({id:ids}))
				});
			},
			//位置计算距离
			getDistance(la1, lo1, la2, lo2) {  // 当前的纬度，当前的经度，接口拿到的纬度，接口拿到的经度
			    let La1 = la1 * Math.PI / 180.0;
			    let La2 = la2 * Math.PI / 180.0;
			    let La3 = La1 - La2;
			    let Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
			    let distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));
				distance = distance * 6378.137;
			    distance = Math.round(distance * 10000) / 10000;
				//保留小数点后3位
				
			   if (distance > 1) {
				   distance =distance.toFixed(1)
			  		return distance+ 'km  ';
			  	} else {
					distance =distance.toFixed(3)
					distance = distance.toString();
					distance=distance.split('.')[1];
					distance=distance.replace(/\b(0+)/gi,"")
			  		return distance +"m";
			  	}
				///let s=la1*Math.PI/180.0  
				/* 结算金额:200
				 
				账户余额：10
				不罚款                          账户余额:210
				罚款:10                         账户余额:0
				结算金额:190                    账户余额:190
				
				账户入账=-10+190+10    账户余额=200
				
				罚款 10
				入账190 */
				
				
				
			},

		}
	}
</script>

<style lang="scss" scoped>
.box{
	padding: 10px;
}
.content2{
	background-color: white;
	padding: 8px ;
	margin-bottom: 10px;
	border-radius: 4px;
	.demo-right {
		text-align: right;
		span{
			color: red;
		}
	}
	.demo-left{
		color: $uni-text-color-placeholder;
	}
	.demo-left,.demo-right{
		font-size: 13px;
		
	}
	/deep/.u-text__value--main{
		font-size: 18px !important;
	}
	/deep/.u-text__value--tips{
		font-size: 14px !important;
	}

	/deep/.u-steps-item__content {
		margin-bottom: 10rpx;
		
	}
	/deep/.u-steps-item__line {
		height: 90px;
	}
	.slot-icon{
		font-size: 20upx;
	}
	/deep/.u-button{
	    color: black !important;
		margin-top: 10px;
		margin-bottom: 5px;
	}
}
.typeName{
	border-radius: 2px;
	background-color: #fff6f5;
	font-size: 25rpx;
	padding: 7rpx;
	color:red;
	display: inline-block;
	position: relative;
	
}
.u-demo-block{
	font-size: 13px;
	color: $uni-text-color-placeholder;
	/deep/.u-read-more__content {
		font-size: 13px;
        color: $uni-text-color-placeholder;
	}
	/deep/.u-text__value{
		color: $Main-green-color !important;
	}
	margin-bottom: 10rpx;
	p{
		margin-bottom: 5px;
	}
}
.btn2{
	padding: 0px 5px;
}
</style>
